<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="shortcut icon" type="image/x-icon"
          href="{{ url_for('static', filename='img/favicon.png') }}"/>
    <title>{% block title %}{% endblock %}-学习记录</title>
    <!-- BOOTSTRAP STYLES-->
    <link href="//cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
    <!-- FONTAWESOME STYLES-->
    <link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- CUSTOM STYLES-->
    <link href="{{ url_for('static', filename='css/custom.css') }}" rel="stylesheet"/>
    {% block style %}{% endblock %}
</head>
<body>

{# url, id, label, icon_class #}
{% set navigation_bar = [
    ('/', 'index', '记录', 'fa fa-calendar fa-2x'),
    ('/setting/', 'setting', '设置', 'fa fa-cog fa-2x')
] %}

{% set active_page = active_page|default('index') %}
<div id="wrapper" class="container">
    {% if get_flashed_messages() %}
        <div class="row">
            <div class="col-md-offset-5"
                 style="position: absolute; z-index: 99; text-align: center;">
                <div class="alert alert-warning alert-dismissible fade in" role="alert">
                    <button type="button" class="close" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                <span id="tip_info">
                    {% for message in get_flashed_messages() %}
                        {{ message }}
                    {% endfor %}
                </span>
                </div>
            </div>
        </div>
    {% endif %}

    <nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div style="color: white; padding: 15px 50px 5px 50px; float: right; font-size: 16px;">
            {{ g.user.email }}
            <a href="{{ url_for('logout') }}" class="btn btn-danger square-btn-adjust">
                退出
            </a>
        </div>
    </nav>
    <!-- /. NAV TOP  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
                <li class="text-center">
                </li>
                {% for href, id, label, icon_cls in navigation_bar %}
                    <li>
                        <a {% if id == active_page %} class="active-menu" {% endif %}
                                                      href="{{ href|e }}">
                            <i class="{{ icon_cls }}"></i>{{ label|e }}
                        </a>
                    </li>
                {% endfor %}
            </ul>

        </div>
    </nav>
    <!-- /. NAV SIDE  -->

    <div id="page-wrapper">
        <div id="page-inner">

            {% block content %}{% endblock %}

        </div>
        <!-- /. PAGE INNER  -->
    </div>
    <!-- /. PAGE WRAPPER  -->
</div>
<!-- /. WRAPPER  -->

{% block script %}
    <script type=text/javascript>
        $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
    </script>
    <!-- SCRIPTS -AT THE BOTOM TO REDUCE THE LOAD TIME-->
    <!-- JQUERY SCRIPTS -->
    <script src="//cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <!-- BOOTSTRAP SCRIPTS -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <!-- METISMENU SCRIPTS -->
    <script src="//cdn.bootcss.com/metisMenu/2.0.2/metisMenu.min.js"></script>
    <!-- CUSTOM SCRIPTS -->
    {#    <script src="/static/js/custom.js"></script>#}
    <script src="{{ url_for('static', filename='js/custom.js') }}"></script>
{% endblock %}
<script>
    $(function () {
        $('.alert').stop(true).animate({
            "opacity": "hide"
        }, 4000);

        $('.close').click(function () {
            $('.alert').hide();
        });
    });
</script>
</body>
</html>